<div v-cloak id="app" class="main-content">
    <div class="form-body">
        <one-form :config="config" v-model="fdata" ref="ruleForm">
            <div slot='menuLeft'>
                <el-button class="button-item" :loading="btnLoading" type="primary" @click="store('ruleForm')" size="small">
                    保存
                </el-button>
                <el-button size="small" @click="backpage()">返回</el-button>
            </div>
        </one-form>
    </div>
</div>
{include file='common@components/one-form'}
<script>
    const _formData= {:json_encode((array)$formData, 1)} ;
    const app = new Vue({
        el: '#app',
        data() {
            return {
                btnLoading:false,
                fdata:{
                    source:'自定义',
                    status:"1",
                },
                config: {
                    formdesc: [{
                            label: "名称 :",
                            prop: "name",
                            type: "input",
                            content:"示例 one-diy",
                            rules:[{ required: true, message: '名称不能为空'},
                                {pattern: /^[A-za-z]+[A-za-z0-9_-]+$/, message: '必须以字母开头'}],
                            bind: {
                                'placeholder': "请输入",
                            },
                        },{
                            label: "描述 :",
                            prop: "intro",
                            type: "textarea",
                            rules:{ required: true, message: '描述不能为空'},
                            bind: {
                                'placeholder': "请输入",
                            },
                        },{
                            label: "状态 :",
                            prop: "status",
                            type: "switch",
                            
                        },
                    ],
                    labelWidth:'200px',
                    rowSize: 1, //一行可以展示几列表单，默认为3列
                },
            }
        },

        created() {
            this.fdata = Object.assign(this.fdata,_formData);
            
        },
        methods: {
            //表单验证
            getFormPromise(form) {
                return new Promise(resolve => {
                    form.validate(res => {
                        resolve(res);
                    })
                })
            },
            backpage(){
                navigateTo({
                    s: 'system/hook/index',
                })
            },
            store(formName) {
                let _this = this;
                let _url  = _formData.id > 0 ? "system/hook/edit" : "system/hook/add"
                // 获取到组件中的form
                const configForm = this.$refs.ruleForm.$refs.ruleForm;
                // 使用Promise.all去校验结果,可加入多个表单
                Promise.all([configForm].map(this.getFormPromise)).then(res => {
                    const validateResult = res.every(item => !!item);
                    if (validateResult) {
                        _this.btnLoading = true;
                        let postData = _this.fdata
                        request({
                            params: {
                                s: _url,
                            },
                            method: 'post',
                            data: postData
                        }).then(e => {
                            _this.btnLoading = false;
                            if (e.data.code == 0) {
                                //修改可不跳转
                                navigateTo({
                                    s: 'system/hook/index',
                                })
                            } else {
                                _this.$message.error(e.data.msg);
                            }
                        })

                    } else {
                        console.log('表单未校验通过');
                    }
                })
                
            },
        },
        mounted(){
            
        },
        computed: {
        }
    });
</script>